<template>
  <div class="bottom-nav-wrapper">
    <!-- 占位元素，防止内容被底部导航遮挡 -->
    <div class="bottom-nav-spacer"></div>
    
    <!-- 底部导航栏 -->
    <div class="bottom-nav glass-effect">
      <div 
        v-for="item in navItems" 
        :key="item.path"
        :class="['nav-item', { 'active': isActive(item.path) }]"
        @click="navigate(item.path)"
      >
        <div class="nav-icon-wrapper">
          <el-icon class="nav-icon" :size="24">
            <component :is="item.icon" />
          </el-icon>
          <!-- 活动指示器 -->
          <div v-if="isActive(item.path)" class="active-indicator"></div>
        </div>
        <span class="nav-label">{{ item.label }}</span>
        <!-- 徽章提示（可选） -->
        <el-badge 
          v-if="item.badge && item.badge > 0" 
          :value="item.badge" 
          class="nav-badge"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  MagicStick, 
  Suitcase, 
  Clock, 
  User 
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 导航项配置
const navItems = [
  {
    path: '/tryon',
    label: '试衣',
    icon: MagicStick,
    badge: 0
  },
  {
    path: '/wardrobe',
    label: '衣橱',
    icon: Suitcase,
    badge: 0
  },
  {
    path: '/history',
    label: '记录',
    icon: Clock,
    badge: 0
  },
  {
    path: '/profile',
    label: '我的',
    icon: User,
    badge: 0
  }
]

// 判断是否为活动路由
const isActive = (path) => {
  return route.path === path || route.path.startsWith(path + '/')
}

// 导航到指定路径
const navigate = (path) => {
  if (route.path !== path) {
    router.push(path)
  }
}
</script>

<style scoped>
/* 占位元素，防止内容被遮挡 */
.bottom-nav-spacer {
  height: 70px;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(217, 70, 239, 0.1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  transition: transform 0.3s ease;
}

/* 毛玻璃效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* 导航项 */
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-item:active {
  transform: scale(0.95);
}

/* 图标容器 */
.nav-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 32px;
}

/* 图标 */
.nav-icon {
  color: #9ca3af;
  transition: all 0.3s ease;
}

/* 活动状态的图标 */
.nav-item.active .nav-icon {
  color: #d946ef;
  transform: scale(1.1);
}

/* 活动指示器 */
.active-indicator {
  position: absolute;
  bottom: -4px;
  width: 24px;
  height: 3px;
  background: linear-gradient(135deg, #ec4899 0%, #d946ef 50%, #8b5cf6 100%);
  border-radius: 2px;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 24px;
    opacity: 1;
  }
}

/* 标签文字 */
.nav-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.nav-item.active .nav-label {
  color: #d946ef;
  font-weight: 600;
}

/* 徽章 */
.nav-badge {
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(12px);
}

/* 桌面端隐藏底部导航 */
@media (min-width: 769px) {
  .bottom-nav-wrapper {
    display: none;
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
  }
  
  .nav-item {
    min-width: 60px;
  }
}

/* 超小屏幕优化 */
@media (max-width: 375px) {
  .nav-label {
    font-size: 0.7rem;
  }
  
  .nav-icon-wrapper {
    width: 40px;
    height: 28px;
  }
  
  .nav-icon {
    font-size: 20px;
  }
}

/* 深色模式支持（可选） */
@media (prefers-color-scheme: dark) {
  .bottom-nav {
    background: rgba(31, 41, 55, 0.95);
    border-top-color: rgba(217, 70, 239, 0.2);
  }
  
  .nav-icon {
    color: #d1d5db;
  }
  
  .nav-label {
    color: #9ca3af;
  }
  
  .nav-item.active .nav-icon {
    color: #d946ef;
  }
  
  .nav-item.active .nav-label {
    color: #d946ef;
  }
}

/* iOS 安全区域适配 */
@supports (padding: max(0px)) {
  .bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* 触摸反馈优化 */
.nav-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 70, 239, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: all 0.4s ease;
}

.nav-item:active::before {
  width: 100%;
  height: 100%;
  opacity: 1;
}
</style>

